<template>
  <div class="Comments">
    <dv-border-box-8 style="padding-top: 20px; width: 100%; height: 520px">
      <dv-decoration-7 style="width: 100%; height: 30px; font-size: 20px"
        >评论数据展示</dv-decoration-7
      >
      <dv-scroll-board
        class="scroll-board"
        :config="config"
        style="width: 98%; height: 468px; margin-left: 1%; margin-top: 15px"
      />
    </dv-border-box-8>
  </div>
</template>

<script>
import { getComments } from "@/api/visualization.js";
export default {
  name: "Comments",
  data() {
    return {
      config: {
        header: [],
        data: [], // 二维数组
        align: ["center"],
        rowNum: 10,
        headerBGC: "#1981f6",
        headerHeight: 45,
        oddRowBGC: "rgba(0, 44, 81, 0.8)",
        evenRowBGC: "rgba(10, 29, 50, 0.8)",
      },
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      getComments().then((res) => {
        this.config = res.data;
        console.log(this.config);
        this.config.header = ["用户名", "作品名", "评论"];
        this.config.data = res.data.map((item) => {
          return [item.user.real_name, item.artwork.title, item.content];
        });
      });
    },
  },
};
</script>

<style scoped>
.dv-scroll-board .header .scroll-board {
  font-size: 20px;
}
</style>
